<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/static/context/mytags.jsp"%>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>${sysname}-产品详情</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="toTop" content="true"><!--返回顶部-->

    <%@ include file="../../../static/context/cssheader.jsp"%>

    <!-- 图片放大 -->
    <link rel="stylesheet" type="text/css" href="${basePath}/static/slider/css/zzsc.css">

    <%@ include file="../../../static/context/cndheader.jsp"%>
</head>
<body class="bd-box">
<!----------------------------------页头-------------------------------->
<!--头部开始-->
<jsp:include page="header.jsp"></jsp:include>
<!--header-->

<!----------------------------------主体内容-------------------------------->
<div class="contentBody">
    <!-- 信息 -->
    <div class="row">
        <!-- 路径导航 -->
        <ol class="breadcrumb">
            <li><a href="${basePath}/custom/product/page/list">首页</a></li>
            <li><a href="${basePath}/custom/product/page/list">商品列表</a></li>
            <li class="active">商品详情</li>
        </ol>
    </div>
    <!-- 资料信息 -->
    <div class="iBox goods-info-box">
        <div class="col-xs-5 am-padding">
            <div class="profile-info">
                <c:if test="${empty product.pics}">
                    <img src="${basePath}/static/custom/images/sp_img.png" alt="">
                </c:if>
                <c:if test="${not empty product.pics}">
                    <div class="con-FangDa" id="fangdajing">
                        <div class="con-fangDaIMg">
                            <!-- 正常显示的图片-->
                            <img src="${basePath}/fileDownLoad/showFile/${product.picFirstId}">
                            <!-- 滑块-->
                            <div class="magnifyingBegin"></div>
                            <!-- 放大镜显示的图片 -->
                            <div class="magnifyingShow"><img src="${basePath}/fileDownLoad/showFile/${product.picFirstId}"></div>
                        </div>

                        <ul class="con-FangDa-ImgList">
                            <!-- 图片显示列表 -->
                            <c:forEach items="${product.pics}" var="pic">
                                <li><img src="${basePath}/fileDownLoad/showFile/${pic}" data-bigimg="${basePath}/fileDownLoad/showFile/${pic}"></li>
                            </c:forEach>
                        </ul>
                    </div>
                </c:if>
            </div>
        </div>
        <div class="col-xs-7">
            <ul class="goods-info-right">
                <li>
                    <div class="row">
                        <div class="col-xs-12">
                            <h1 class="goods-info-name">${product.name}</h1>
                        </div>
                    </div>
                    <div class="am-text-gray am-margin-vertical-xs text-left">
                        <p>类型：${product.typeName}</p>
                        <p>描述：${product.content}</p>
                    </div>
                    <hr class="dotted">
                    <ol class="list-text-info">
                        <dl>
                            <div class="price_num">￥<b><fmt:formatNumber type="number" value="${product.price}" pattern="#.00"/></b>
                                <small class="text-gray"></small>
                            </div>

                        </dl>
                    </ol>
                    <hr class="dotted">
                </li>
                <li>
                    <a href="javascript::;" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#buy">购买</a>
                    <input type="hidden" value="${product.id}" id="productId">
                    <a href="javascript:void(0);"  id="tryproduct" class="btn btn-info btn-lg" >试用</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 详情内容 -->
    <div class="row">
        <div class="col-xs-12">
            <div class="iBox">
                <div class="iBox-title">产品介绍</div>
                <div class="iBox-content">
                    <video src="${basePath}/fileDownLoad/showFile/${product.videoId}" controls class="video" style="height: 580px;">
                        您的浏览器不支持 video 标签。
                    </video>
                </div>
            </div>
        </div>
    </div>
</div>

<!--右侧边快捷-->
<%--<div class="UpTop">
    <ul>
        <li class="Up-help right-tel"> <i class="icon-bar3"></i> <a class="upTop-text animated fadeInRight" href="javascript::;">在线客服</a> </li>
        <li class="Up-help right-tel"> <i class="icon-bar4"></i> <a class="upTop-text animated fadeInRight" href="javascript::;">T：96050</a> </li>
        <li class="Up-help right-tel"> <i class="icon-bar5"></i> <a class="right-qr animated fadeInRight" href="javascript::;"><img src="images/gz_hs.png" width="110" alt=""/></a> </li>
        <li id="upTop"> <i class="icon-bar6"></i> <a class="upTop-text" href="javascript::;">返回顶部</a> </li>
    </ul>
</div>--%>

<!-- 购买选择 -->
<div class="modal fade" id="buy" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">购买</h4>
            </div>
            <div class="modal-body">

                <form role="form" class="form-horizontal">
                    <div class="form-group">
                        <label class="col-xs-2 control-label">数量：</label>
                        <div class="col-xs-10">
                            <div class="order-num">
                                <div class="input-group">
							  <span class="input-group-btn">
								<button class="btn btn-default" type="button" id="minusbuynum">-</button>
							  </span>
                                    <input type="text" class="form-control" value="1" id="buynum">
                                    <span class="input-group-btn">
								<button class="btn btn-default" type="button" id="addbuynum">+</button>
							  </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-2 control-label">总价：</label>
                        <div class="col-xs-10">
                            <p class="form-control-static"><b class="text-warning" id="totalprice">￥<fmt:formatNumber type="number" value="${product.price}" pattern="#.00"/></b></p>
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="confimbuy">确认购买</button>
            </div>
        </div>
    </div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    提示
                </h4>
            </div>
            <div class="modal-body">
                购买成功
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    确定
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!----------------------------------页脚-------------------------------->
<jsp:include page="footer.jsp"></jsp:include>

<%@ include file="/static/context/customjs.jsp"%>
<script type="text/javascript" class="library" src="${basePath}/static/slider/js/jquery.colorbox-min.js"></script>
<script type="text/javascript" class="library" src="${basePath}/static/slider/js/zzsc.js"></script>
<script>
    var basePath = '${basePath}';
    var price = '${product.price}';
</script>
<script type="text/javascript" class="library" src="${basePath}/static/js/custom/product_detail.js"></script>
</body>
</html>